<template>
	<van-tabbar 
    v-model="active" 
    active-color="#FE472D"
    inactive-color="#333333" 
    @change="routeLink">
      <van-tabbar-item 
       v-for="(tab, index) in tabbar"
       :info="tab.info" 
       :dot="tab.dot" 
       :key="index">
        <span>{{tab.name}}</span>
        <icon
         class="icon"
          :name="props.active ? tab.icon + '-active' : tab.icon"
          slot="icon"
          slot-scope="props"
          :title="props.active"
          ></icon>
          
      </van-tabbar-item>
	</van-tabbar>
</template>


<script>
import { Tabbar, TabbarItem } from "vant";
import { mapState , mapGetters} from 'vuex';

export default {
  name: 'store-tabbar',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 0,
      tabbar: [
        {
          name: "首页",
          path: "/main/home",
          pathName: "home",
          icon: "bot-home",
          dot: false,
          info: ""
        },
        {
          name: "积分",
          path: "/main/integral",
          pathName: "integral",
          icon: "bot-points",
          dot: false,
          info: ""
        },
        {
          name: "购物车",
          path: "/main/cart",
          pathName: "cart",
          icon: "bot-cart",
          dot: false,
          info: ""
        },
        {
          name: "我的",
          path: "/main/user",
          pathName: "user",
          icon: "bot-user",
          dot: false,
          info: ""
        }
      ]
    };
  },

  watch: {
    $route: "changeActive",
    // cartNum (newNum) {
    //   if (newNum) {
    //     this.tabbar[2].dot = true
    //   }
    // },
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
    }),
    // ...mapGetters('cart', ['cartNum']),
  },
  created() {
    const toName = this.$route.name;
    this.setActive(toName);
  },

  methods: {
    changeActive({ name }) {
      this.setActive(name);
    },
    setActive(name) {
      this.tabbar.forEach((tab, i) => {
        if (tab.pathName == name) {
          this.active = i;
          return false;
        }
      });
    },
    routeLink(active) {
      if((active == 2 || active == 3) && !this.isLogin){
        this.$store.commit('user/SET_BEFOREPATH', this.tabbar[active].path)
        this.$router.push('/login')
      } else {
        this.$router.push(this.tabbar[active].path)
      }
    },
  }
};
</script>
<style lang="scss" scoped>

</style>
